<template>
  <VaCard
    stripe
    stripe-color="success"
    color="#FAFAFA"
    style="max-width: 1200px; margin: 0 auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)"
  >
    <VaCardTitle style="font-size: larger">在此处书写你的自定义代码</VaCardTitle>
    <VaCardActions align="between">
      <VaSelect v-model="selectedLanguage" style="max-width: 200px" :options="languages" label="选择语言" />
      <VaButton color="primary" @click="saveModel">保存模型</VaButton>
    </VaCardActions>
    <VaCardContent>
      <MonacoEditor
        v-model="code"
        :language="selectedLanguage"
        :theme="'vs-dark'"
        style="height: calc(100vh - 150px); width: 100%"
        :options="editorOptions"
        @change="updateCode"
      />
    </VaCardContent>
  </VaCard>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useToast } from 'vuestic-ui'
import MonacoEditor from 'monaco-editor-vue3'

const toast = useToast()
const code = ref('# Write your python code here')
const languages = ref(['python', 'python3', 'cpp'])
const selectedLanguage = ref('python')
const editorOptions = ref({
  folding: true,
  value: 'from torchvision import models\nmodel = models.resnet50(pretrained=True)',
  showFoldingControls: 'always',
  automaticLayout: true,
  scrollBeyondLastLine: false,
  readOnly: false,
  fontSize: 18,
})

const saveModel = () => {
  console.log('1')
  console.log(toast)
  socket.emit('code', editorContent.value)
  console.log('保存的内容:', editorContent.value) // 确保这里是输出内容
  toast.init({ message: '保存成功', color: 'success' }) // 使用 Toast 实例
}

const updateCode = (newCode) => {
  code.value = newCode
}
</script>

<style scoped>
.content {
  width: 100%;
  height: calc(100vh - 150px);
  border: 2px solid #ccc;
}
</style>
